<template>
  <div class="project">
    <div class="tab_bar">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部项目" name="all"></el-tab-pane>
        <el-tab-pane label="已经收藏" name="like"></el-tab-pane>
        <el-tab-pane label="已归档" name="finish"></el-tab-pane>
        <el-tab-pane label="回收站" name="delete"></el-tab-pane>
      </el-tabs>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="dialogFormVisible = true"
        >创建新项目</el-button
      >
    </div>
    <div class="list_box">
      <el-table
        :show-header="false"
        :data="newProjectList"
        :border="false"
        style="width: 100%"
      >
        <el-table-column prop="image" label="图片" width="60">
          <template slot-scope="scope">
            <img
              :src="scope.row.image"
              alt=""
              style="width: 50px; heiht: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="项目名称">
          <template slot-scope="scope">
            <span
              style="
                line-height: 40px;
                color: rgb(80, 140, 240);
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >{{ scope.row.title }}</span
            >
            <br />
            <span style="color: #ccc">{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="日期" width="120">
          <template slot-scope="scope">
            <span style="color: #ccc">
              创建日期
              <br />
              {{ new Date(scope.row.create_time).toLocaleDateString() }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者" width="120">
          <template slot-scope="scope">
            <span style="color: #ccc">
              创建人
              <br />
              {{ scope.row.author }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="plan" label="进度" width="120">
          <template slot-scope="scope">
            <span style="color: #ccc"> 进度 </span>
            <br />
            <el-progress :percentage="scope.row.plan * 1"></el-progress>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130">
          <template slot-scope="scope">
            <i class="el-icon-user"></i>
            |
            <i class="el-icon-setting" @click="openEditDialog(scope.row)"></i>
            |
            <i
              v-if="!scope.row.isLike"
              class="el-icon-star-off"
              @click="setLike(scope.row.id, true)"
            ></i>
            <i
              v-else
              class="el-icon-star-on"
              @click="setLike(scope.row.id, false)"
            ></i>
            |
            <i class="el-icon-delete" @click="delList(scope.row.id)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--添加项目 -->
    <el-dialog title="添加项目" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="项目名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目模板" :label-width="formLabelWidth">
          <el-select v-model="form.templateId" placeholder="请选择模板">
            <el-option
              v-for="item in templateData"
              :key="item.id"
              :label="item.author"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目简介" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="form.content"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addProject">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑项目 -->
    <el-dialog title="编辑项目" :visible.sync="editProjectVisible">
      <div class="edit_box">
        <div class="edit_tab">
          <div
            v-for="item in tabList"
            :key="item.name"
            class="tab_list"
            :class="tabName === item.tabName ? 'tab_list_acitve' : ''"
            @click="tabName = item.tabName"
          >
            <div class="tab_icon">
              <i :class="item.icon"></i>
            </div>
            <div class="tab_name">{{ item.name }}</div>
          </div>
        </div>
        <div class="edit_body">
          <!-- 动态组件 -->
          <components
            :is="tabName"
            :detailData="detailData"
            @closeDialog="editProjectVisible = false"
            @updateList="getList()"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EditComponent from "./components/EditComponent.vue";
import MoreComponent from "./components/MoreComponent.vue";
export default {
  components: {
    EditComponent,
    MoreComponent,
  },
  data() {
    return {
      activeName: "all",
      detailData: null,
      projectList: [],
      dialogFormVisible: false,
      editProjectVisible: false,
      form: {
        title: "",
        content: "",
        templateId: "",
      },
      formLabelWidth: "120px",
      tabName: "EditComponent",
      tabList: [
        {
          name: "概览",
          icon: "el-icon-view",
          tabName: "EditComponent",
        },
        {
          name: "更多",
          icon: "el-icon-more",
          tabName: "MoreComponent",
        },
      ],
      templateData: [
        {
          id: 1,
          image:
            "https://img1.baidu.com/it/u=388421749,2944419891&fm=26&fmt=auto&gp=0.jpg",
          author: "马玉玺",
          plan: 50,
          isLike: false,
          isDelete: false,
          create_time: Date.now(),
        },
        {
          id: 2,
          image:
            "https://img0.baidu.com/it/u=2543545512,1880313772&fm=26&fmt=auto&gp=0.jpg",
          author: "马小稀",
          plan: 80,
          isLike: false,
          isDelete: false,
          create_time: Date.now(),
        },
      ],
    };
  },
  computed: {
    submit() {
      // 编辑 编辑成功关闭弹框
      this.$api.editList();
    },
    newProjectList() {
      let list = [];
      switch (this.activeName) {
        case "all":
          list = this.projectList.filter((item) => !item.isDelete);
          break;
        case "like":
          list = this.projectList.filter(
            (item) => item.isLike && !item.isDelete
          );
          break;
        case "finish":
          list = this.projectList.filter(
            (item) => item.plan >= 80 && !item.isDelete
          );
          break;
        case "delete":
          list = this.projectList.filter((item) => item.isDelete);
          break;
      }
      return list;
    },
  },
  methods: {
    openEditDialog(row) {
      // 打开弹框
      this.editProjectVisible = true;
      this.detailData = row; // 回显
    },
    handleClick(tab, event) {},
    setLike(id, like) {
      this.$api.like({ id, like }).then((res) => {
        if (res.code === 1) {
          this.getList();
        }
      });
    },
    getList() {
      this.$api.getList().then((res) => {
        this.projectList = res.list;
      });
    },
    delList(id) {
      this.$confirm("确定放到回收站吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.deleteList(id).then((res) => {
            if (res.code === 1) {
              this.getList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addProject() {
      // 过滤出来我们选中的模板
      const data = this.templateData.filter(
        (item2) => item2.id === this.form.templateId
      )[0];
      // 合并模板和form
      this.form = { ...this.form, ...data };
      this.$api.addList(this.form).then((res) => {
        if (res.code === 1) {
          this.getList();
        }
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang='scss'>
.project {
  background: #fff;
  height: 100%;
  padding: 15px;
  overflow: auto;
  .tab_bar {
    position: relative;
    .el-button--primary {
      position: absolute;
      right: 0;
      top: 6px;
    }
  }
  .el-table {
    i {
      cursor: pointer;
    }
  }
}
.edit_box {
  width: 100%;
  display: flex;
  .edit_tab {
    width: 100px;
    border-right: 1px solid #ccc;
    .tab_list {
      height: 50px;
      display: flex;
      line-height: 50px;
      cursor: pointer;
      .tab_icon {
        width: 30px;
      }
      .tab_name {
        flex: 1;
      }
    }
    .tab_list_acitve {
      color: rgb(90, 135, 200);
      font-weight: bold;
      border-right: 2px solid rgb(90, 135, 200);
    }
  }
  .edit_body {
    flex: 1;
    padding: 20px;
  }
}
</style>